<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
            width: 800px;
            height: 400px;
            position: relative;
        }
        .list{
            width: 800px;
            height: 400px;
            list-style: none;
            position: relative;
            padding-left:0;
        }
        .item{
            width: 100%;
            height: 100%;
            font-size: 50px;
            color: white;
            position: absolute;
            opacity: 0;
            transition: all 1s;
        }
        .item:nth-child(1){
            background-color: #FF6666;
        }
        .item:nth-child(2){
            background-color: palegreen;
        }
        .item:nth-child(3){
            background-color: darkred;
        }
        .item:nth-child(4){
            background-color: cornflowerblue;
        }
        .item:nth-child(5){
            background-color: purple;
        }
        .btn{
            width: 50px;
            height: 100px;
            position: absolute;
            top: 150px;
            z-index: 100;
        }
        #goPre{
            left: 0;
        }
        #goNext{
            right: 0;
        }
        .item.active{
            opacity: 1;
            z-index: 10;
        }
        .pointlist{
            padding-left: 0;
            list-style: none;
            position: absolute;
            right: 340px;
            bottom: 10px;
            z-index: 1000;
        }
        .point{
            width: 10px;
            height: 10px;
            background-color: rgba(0,0,0,0.4);
            border-radius: 100%;
            float: left;
            margin-right:14px ;
        }
        .point.active{
            background-color: rgba(255,255,255,0.8);
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul class="list">
        <li class="item active">0</li>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
    </ul>
    <ul class="pointlist">
        <li class="point active" data-index='0'></li>
        <li class="point" data-index='1'></li>
        <li class="point" data-index='2'></li>
        <li class="point" data-index='3'></li>
        <li class="point" data-index='4'></li>
    </ul>
    <button type="button" class="btn" id="goPre"><</button>
    <button type="button" class="btn" id="goNext">></button>
</div>

<script type="text/javascript">
    var items = document.getElementsByClassName('item');
    var points= document.getElementsByClassName('point');
    var goPreBtn = document.getElementById('goPre');
    var goNextBtn = document.getElementById('goNext');
    var index = 0;
    let timer = 0

    /** 监听点击事件*/

    goNextBtn.addEventListener('click',function () {
        stopTimer()
        goNext(true);
    })
    goPreBtn.addEventListener('click' ,function(){
        stopTimer()
        goNext(false);
    })

    for(var i=0 ; i < points.length; i++) {
        points[i].addEventListener('click',function (){
            stopTimer()
            var pointIndex = this.getAttribute('data-index');
            index = Number(pointIndex);
            goIndex();
        })
    }

    function cleanActive() {
        for (var i=0; i < items.length ; i++){
            items[i].className = 'item';
        }
        for (var i=0; i < points.length ; i++){
            points[i].className = 'point';
        }
    }
    function goIndex() {
         cleanActive();
         items[index].className = 'item active';
         points[index].className= 'point active';
    }
    function goNext(isNext) {
        if (isNext) {
            if(index < items.length - 1){
                index += 1;
            }else {
                index = 0;
            }
        }else {
            if(index == 0){
                index = items.length - 1;
            }else {
                index -= 1;
            }
        }
        goIndex();
    }

    /** timer */

    function timerHandle() {
        goNext(true)
    }

    function startTimer() {
        console.log('==> 计时器开始')
        clearInterval(timer)
        timer = setInterval(timerHandle, 3000)
    }

    function stopTimer() {
        console.log('==> 计时器停止')
        clearInterval(timer)
        setTimeout(startTimer, 2000)
    }

    startTimer()
    
</script>

</body>
</html>